<template>
  <div class="online-card" :style="{'width': '100%', 'height': height + 'px'}" @click="onScreen">
    <div class="online-header text-center flex justify-around items-center" v-if="isCardType">
        <div class="h-title" v-for="item in titleList" :key="item">{{item}}</div>
    </div>
    <div class="online-header flex justify-between padding-l-20 padding-r-20" v-else>
      <div class="new-title" v-if="isShowPoliceInfo">
        <div class="new-title-item" v-for="item in titleList" :key="item.value"
             :style="infoValue === item.value && {color: '#5f77fd'}"
             @click="getChange(item)">{{item.label}} ({{item.tip || 0}}条)</div>
      </div>
      <div class="h-title" v-else>{{titleList[0]}}</div>
      <slot name="header"></slot>
    </div>
    <div class="online-content scrollbar overflow-auto padding-t-20 padding-b-20" :style="getMaxHeight" v-if="isCardType">
      <slot name="content"></slot>
    </div>
    <div class="online-content" :style="getMaxHeight"  v-else>
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'online-card',
  props: {
    titleList: {
      type: Array
    },
    isCardType: {
      type: Boolean,
      default: true
    },
    infoValue: Number,
    isShowPoliceInfo: {
      type: Boolean,
      default: false
    },
    onlineData: Array || Object,
    width: {
      type: String,
      default: '300px'
    },
    height: {
      type: Number,
      default: 270
    }
  },
  data () {
    return {

    }
  },
  computed: {
    getMaxHeight () {
      console.log(this.height)
      return { 'max-height': this.height - 50 + 'px', 'z-index': 999 }
    }
  },
  methods: {
    onScreen () {
      console.log('全平')
    },
    getChange (item) {
      this.$emit('getChangeInfo', item)
    }
  },
  mounted () {

  }
}
</script>
<style lang="scss" scoped>
.online-card {
    border: 1px solid #D3D3D3;
    border-radius: 6px;
  .online-header {
    height: 48px;
    line-height: 48px;
    width: 100%;
    background: #F3F3F3;
    border-bottom: 1px solid #D3D3D3;
    border-radius: 6px 6px 0px 0px;
  }
  .h-title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    width:50%;
  }
  .new-title{
    display: flex;
    align-items: center;
    &-item{
      margin-right: 20px;
      cursor: pointer;
      position: relative;
      &:first-child::after{
        content: '';
        position: absolute;
        height: 30px;
        width: 1px;
        background: #999;
        right: -10px;
        top: 10px;
        border-radius: 2px;
      }
    }

  }
  .m-title {
    font-size: 24px;
    height: 24px;
    line-height: 24px;
    font-family: PingFang SC;
    font-size: 24px;
    font-weight: bold;
    width:50%;
    color: #5F77FD;
  }
  .more-title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    width:50%;
    color: rgba(51, 51, 51, 1);
  }
}
</style>
